<template>
    <div class="mine">
         <header>
             <van-uploader v-model="fileList" max-count="1"/>
             <section>
                <h5 v-if="!token">立即登录</h5>
                <h5 v-else>用户名</h5>
               <p>积分{{logs}}</p>
               <p @click="loginout">退出登录</p>
             </section>

         </header>
         <van-notice-bar
            left-icon="volume-o"
            text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
            />
            <van-cell title="我的订单" icon="shop-o" @click="$router.push('/myOrder')">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
               <van-icon name="arrow" />
            </template>
            </van-cell>

            <van-grid :border="false">
                <van-grid-item icon="photo-o" text="待付款" />
                <van-grid-item icon="photo-o" text="待发货" />
                <van-grid-item icon="photo-o" text="待收货" />
                <van-grid-item icon="photo-o" text="待评价" />
            </van-grid>
            <van-grid :border="false" :column-num="3">
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
                <van-grid-item icon="photo-o" text="地址">
                   
                </van-grid-item>
            </van-grid>


    </div>
</template>
<script>
import { ref,reactive,toRefs } from 'vue';
import {getLogs} from '@/utils/second'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
        // 放在assets下的图片动态绑定  必须require引入
       const fileList = ref([
      { url: require('../../assets/img/jingtian.jpeg') }
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明 
     
    ]); 
    const {push} = useRouter()
     const data = reactive({
        token:localStorage.getItem('token'),
        logs:''
     })
     getLogs({token:data.token}).then(res=>{
        console.log(res)
        data.logs = res.data.result[0].score
     })
     const loginout=()=>{
        localStorage.removeItem('token')
        push('/login')

     }
   
    return {fileList,...toRefs(data),loginout}
    },
    components:{
       
    }
}
</script>
<style scoped lang="scss">
    header{
        background:#c1b18f;
        padding:0 20px;
        height: 150px;
        width:100%;
        display: flex;
        align-items: center;
    }
    :deep(.van-uploader__preview-image){
        border-radius: 50%;
    }
    :deep(.van-uploader__preview-delete){
         border-radius: 50%;
         top:-3px;
    }
    :deep(.van-uploader__preview-delete-icon){
        top:1px;
        right:1px;
    }
    section{
        color:#fff;
    }
    :deep(.van-notice-bar__content){
        color:#c00;
        font-size:12px;
    }
</style>
  


